<template>
  <div>
    <div class="monitor ">
      <div class="inner">
        <div class="content">
          <div class="head">
            <span class="col">警告时间</span>
            <span class="col">围栏名称</span>
            <span class="col">告警内容</span>
          </div>
          <div class="marquee-view">
            <div class="marquee">
              <div class="row">
                <span class="col">2021.01.15</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.15</span>
                <span class="col">A7</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.14</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <!-- 红色显示条 -->
              <div class="row" id="red" v-if="showDiv" @click="showredbtn">
                <span class="col">2021.01.15</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.14</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>

              <div class="row">
                <span class="col">2021.01.14</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>

              <div class="row">
                <span class="col">2021.01.14</span>
                <span class="col">A3</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.14</span>
                <span class="col">A9</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.14 </span>
                <span class="col">A4</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.14 </span>
                <span class="col">A7</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <!-- <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A1</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A2</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A2</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">2021.01.13</span>
                <span class="col">A5</span>
                <span class="col">非法入侵</span>
                <span class="icon-dot"></span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lunbo",
  data() {
    return {
      showDiv: false,
    };
  },
  created() {
    // this.start();
  },
  methods: {
    start() {
      // let _this = this
      setTimeout(() => {
        this.showDiv = true;
      }, 1000);
      console.log("111111111111111111111");
    },
    end() {
      this.showDiv = false;
    },
    showredbtn() {
      console.log("22222222222222222222222222");
      // this.$parent.ishowrenbtn();
    },
  },
};
</script>

<style lang="scss" scoped>
/* 监控区域 */
.monitor {
  height: 240px;
  overflow: hidden;
}
.monitor .inner {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs {
  padding: 0 36px;
  margin-bottom: 18px;
  display: flex;
}
// .monitor .tabs a {
//   color: #1950c4;
//   font-size: 18px;
//   padding: 0 27px;
// }
// .monitor .tabs a:first-child {
//   padding-left: 0;
//   border-right: 2px solid #00f2f1;
// }
// .monitor .tabs a.active {
//   color: #fff;
// }
.monitor .content {
  flex: 1;
  position: relative;
  //   display: none;
}
.monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 36px;
  color: #68d8fe;
  font-size: 14px;
}
.monitor .marquee-view {
  position: absolute;
  top: 42px;
  height: 289px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.monitor .row {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 12px;
  color: #61a8ff;
  padding: 12px 36px;
}
.monitor .row .icon-dot {
  position: absolute;
  left: 16px;
  opacity: 0;
}
.monitor .row:hover {
  // background-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(14, 113, 204, 0.6);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot {
  opacity: 1;
}
.monitor .col:first-child {
  width: 80px;
}
.monitor .col:nth-child(2) {
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3) {
  width: 80px;
}

// 动画
.marquee-view .marquee {
  animation: move 15s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}

.marquee .row:nth-child(odd) {
  background-color: rgb(6, 44, 111);
}
.marquee .row:nth-child(even) {
  background-color: rgba(4, 14, 75, 1);
}
.marquee #red {
  background-color: red;
}
</style>
